<template>
	<view class="vol-index">
		<!-- 轮播图部分 -->
		<view class="page-section-spacing">
			<swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
				<swiper-item class="seiper-item" v-for="(item , index) in homeSlide" :key="index">
					<image class="im" :src="item.img"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 表单部分 -->
		<view class="home">
			<van-field colon required='true' :value="UserPhone" @input="UserPhoneText" left-icon="phone-o" label="被访人手机号"
			 placeholder="请输入被访人手机号" @blur=mobileNum(UserPhone) />
			
			<!-- <van-field left-icon="user-o" colon :value="Name" @input="nameText"  label="姓名" placeholder="请输入姓名" hold-keyboard="true" @blur="blurName(Name)" /> -->
			<van-field left-icon="underway-o" clearable required='true' colon :value="StartTime" label="开始预约时间" placeholder="请输入开始预约时间"
			 hold-keyboard="true" @tap="timeSelect" disabled />
			<van-field left-icon="clock-o" clearable colon required='true' :value="End" label="结束预约时间" placeholder="请输入结束预约时间"
			 @tap="endtimeSelect" disabled />
			<van-field colon left-icon="fire-o" clearable :value="Reasons" @input="ReasonsInput" label="来访事由" placeholder="请输入来访事由" />
			<van-field colon left-icon="bag-o" clearable :value="CarryGoods" @input="CarryGoodsInput" label="携带物品" placeholder="请输入携带物品" />
			<view class="number">
				<van-icon name="friends-o" size="16px" />
				<text>人数</text>
				<view class="stepper">
					<van-stepper input-width="50px" :value="Entourage" @change="EntourageChange" min="1" max="50" />
				</view>
			</view>
			<view class="number">
				<van-icon name="certificate" size="16px" />
				<text>类型</text>
				<view class="stepper">
					<van-radio-group :value="radio" @change="onChange">
						<van-radio class="radio1" name="1">个人</van-radio>
						<van-radio class="radio2" name="2">团队</van-radio>
					</van-radio-group>
				</view>
			</view>
		</view>
		<view class="subscribe">
			<van-button class="primary" type="primary" block color="#3578E5" @tap="primary">发 起 预 约</van-button><strong></strong>
		</view>
		<!-- 登录登录状态 -->
		<view class="loginBox" v-if="showLogin">
			<text class="login">您当前尚未登录</text>
			<text class="login size">未登录,将无法享受预约服务哦~</text>
			<button class="loginBtn" type="default" @tap="loginLink">立即登录</button>
		</view>
		<!-- 时间选择器部分 -->
		<view>
			<van-datetime-picker item-height=24 v-show="showTime" class="ddSelect" title="选择开始访问时间" type="datetime" :value="currentDate"
			 @input="onInput" :min-date="minDate" :max-date="maxDate" @cancel="timeCancel" @confirm="timeConfirm(currentDate,endCurrentDate)" />

			<van-datetime-picker item-height=24 v-show="endShowTime" class="ddSelect" title="选择结束访问时间" type="datetime" :value="endCurrentDate"
			 @input="endOnInput" :min-date="minDate" :max-date="maxDate" @cancel="endTimeCancel" @confirm="endTimeConfirm(endCurrentDate,currentDate)" />
		</view>


	</view>
</template>
<script>
	import request from '../../request/request.js'
	export default {
		onShow: function() { //option为object类型，会序列化上个页面传递的参数
			this.$global.getOpenId('js');
			this.showLogin = this.$store.state.isLogin;
			console.log('首页中isLogin是:', this.showLogin);
			if (this.showLogin) {
				uni.showToast({
					title: '您还未登录',
					icon: 'loading'
				})
			}
			this.$store.commit('checksession');
		},
		data() {
			return {
				showLogin: true, //true
				showTime: false,
				endShowTime: false,
				shadeStatus: false,
				radio: '1',
				toggle: false,
				endTime: false,
				subscribe: "发起预约",
				number: "人数",
				UserPhone: "",
				Name: "",
				StartTime: "",
				End: "",
				Reasons: "",
				CarryGoods: "",
				AppointType: "1",
				Entourage: 1,
				homeSlide: [{
						img: require('../../static/img/swiper1.jpg')
					},
					{
						img: require('../../static/img/swiper2.jpg')
					},
				],
				iDays: 0,
				// 时间选择器部分
				minDate: new Date().getTime(),
				maxDate: new Date(2021, 11, 31).getTime(),
				currentDate: "",
				endCurrentDate: "",
				tokenValue: "",
			}
		},
		methods: {
			loginLink() {
				uni.navigateTo({
					url: '../home/home'
				})
			},
			close1() {
				this.StartTime = '';
			},
			close2() {
				this.End = '';
			},
			ReasonsInput(rea) {
				this.Reasons = rea.detail;
			},
			CarryGoodsInput(Car) {
				this.CarryGoods = Car.detail;
			},
			EntourageChange(Ent) {
				this.Entourage = Ent.detail;
			},
			mobileNum(UserPhone) {
				if (!/^1[3|4|5|7|8][0-9]{9}$/.test(UserPhone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'loading'
					})
				}
			},
			UserPhoneText(e) {
				this.UserPhone = e.detail;
			},

			nameText(n) {
				this.Name = n.detail
			},
			blurName(Name) {
				if (!/^[\u4E00-\u9FA5]{2,4}$/.test(Name)) {
					uni.showToast({
						title: '姓名格式错误',
						icon: 'loading'
					})
				}
			},

			onInput(e) {
				this.currentDate = e.detail;

			},
			endOnInput(k) {
				this.endCurrentDate = k.detail;

			},
			timeSelect() {
				this.showTime = !this.showTime;
				this.endShowTime = false;
				this.StartTime = '';
			},
			endtimeSelect() {
				this.endShowTime = !this.endShowTime;
				this.showTime = false;
				this.End = '';
			},

			timeCancel() {
				this.showTime = false;
			},
			endTimeCancel() {
				this.endShowTime = false;
			},
			timeConfirm(currentDate, endCurrentDate) {
				var curdate = new Date(currentDate);
				var Y = curdate.getFullYear() + '-';
				var M = (curdate.getMonth() + 1 < 10 ? '0' + (curdate.getMonth() + 1) : curdate.getMonth() + 1) + '-';
				var D = (curdate.getDate() < 10 ? '0' + curdate.getDate() : curdate.getDate()) + ' ';
				var h = (curdate.getHours() < 10 ? '0' + curdate.getHours() : curdate.getHours()) + ':';
				var m = (curdate.getMinutes() < 10 ? '0' + curdate.getMinutes() : curdate.getMinutes()) + ':';
				var s = (curdate.getSeconds() < 10 ? '0' + curdate.getSeconds() : curdate.getSeconds());

				var strDate = Y + M + D + h + m + s;
				this.StartTime = strDate
				this.showTime = false;
				if (currentDate >= endCurrentDate) {
					if (this.End) {
						uni.showToast({
							title: '时间选择不合理',
							icon: 'loading'
						})
					}
					this.End = "";
				};
				return strDate;
			},
			endTimeConfirm(endCurrentDate, currentDate) {
				var endDate = new Date(endCurrentDate);
				var Y = endDate.getFullYear() + '-';
				var M = (endDate.getMonth() + 1 < 10 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1) + '-';
				var D = (endDate.getDate() < 10 ? '0' + endDate.getDate() : endDate.getDate()) + ' ';
				var h = (endDate.getHours() < 10 ? '0' + endDate.getHours() : endDate.getHours()) + ':';
				var m = (endDate.getMinutes() < 10 ? '0' + endDate.getMinutes() : endDate.getMinutes()) + ':';
				var s = (endDate.getSeconds() < 10 ? '0' + endDate.getSeconds() : endDate.getSeconds());

				var endDateSwf = Y + M + D + h + m + s;
				this.End = endDateSwf
				this.endShowTime = false;
				if (currentDate >= endCurrentDate) {
					uni.showToast({
						title: '时间选择不合理',
						icon: 'loading'
					})
					this.End = "";
				};
				return endDateSwf;
			},
			onChange(ev) {
				this.radio = ev.detail;
			},
			primary() {
				if (this.showLogin) {
					uni.showToast({
						title: '请登录后预约',
						icon: "loading"
					})
				} else if (this.UserPhone == '' || this.StartTime == '' || this.End == '') {
					uni.showToast({
						title: '必填项不能为空',
						// image:'../../static/img/fail.png',
						icon: "loading",
					})
				} else {
					var that = this;
					uni.getStorage({
						key: 'token',
						success: function(res) {
							that.tokenValue = res.data;
						}
					});
					that.requestData()
				};
			},
			requestData() {
				// 点击发起预约按钮，发送请求获取数据
				request({
					url: '/api/Dev_Appointment/AddWeChat',
					method: 'POST',
					data: {
						"userPhone": this.UserPhone,
						"name": this.name,
						"startTime": this.StartTime,
						"endTime": this.End,
						"reasons": this.Reasons,
						"carryGoods": this.CarryGoods,
						"appointType": parseInt(this.radio), //转字符串类型
						"entourage": this.Entourage,
						"appoimentSource": 2
					},
					success: (respon) => {
						this.UserPhone = '';
						this.name = '';
						this.StartTime = '';
						this.End = '';
						this.Reasons = '';
						this.CarryGoods = '';
						this.Entourage = 1;
						wx.switchTab({
							url: '../record/record'
						})
						if (respon.code != 311) {
							uni.showToast({
								title: respon.data.message,
								icon: "loading",
							})
						} else {
							uni.showToast({
								title: "预约成功了",
								icon: "loading",
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '预约失败' + err,
							icon: "loading",
						})
					},
				})
			}
		}

	}
</script>
<style>
/* 	.search {
		position: absolute;
		right: 8%;
		top: 4%;

	} */

	.loginBox {
		box-sizing: border-box;
		width: 100%;
		height: 100upx;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		bottom: 0;
		padding: 3px 26px;
	}

	.loginBox .loginBtn {
		width: 200upx;
		height: 60upx;
		position: absolute;
		right: 7%;
		top: 50%;
		transform: translate(0, -50%);
		line-height: 60upx;
		background-color: #007AFF;
		color: #ffffff;
		border-radius: 60upx;
	}

	.login {
		display: block;
		color: #FFFFFF;
		margin: 0;
		padding: 0;
	}

	.size {
		font-size: 12px;
		color: #dadada;
	}


	.ddSelect {
		/* float: right; */
		width: 100%;
		position: absolute;
		bottom: 0;
		background-color: rgba(0, 0, 0, 1);
	}

	page {
		height: 100%;
	}

	.test {
		text-align: center;
		padding: 10px 0;
	}

	.page-section-spacing {
		width: 750upx;
		height: 350upx;
	}

	.swiper {
		width: 100%;
		height: 100%;
		display: block;
	}

	.seiper-item {
		width: 100%;
		height: 100%;
		display: block;
		text-align: center;
	}

	.swiper-item .im {
		display: block;
		width: auto;
		height: 100%;

	}

	.home {
		width: 88%;
		margin: 0 auto;
		margin-top: 54upx;
		margin-bottom: 54upx;
		border: 1px solid #e3f1f1;
		background: #fff;
		position: relative;
	}

	.home van-field {
		color: #3578e5;
		border-bottom: 1px solid #3578e5;
		height: 2upx;
	}

	.vol-index {
		height: 100%;
		background: #f9f9f9;
		position: relative;
	}

	.number {
		margin: 0 auto;
		width: 90%;
		height: 90upx;
	}

	.number text {
		line-height: 90upx;
		margin-left: 10upx;
	}

	.number van-icon {
		vertical-align: middle;
	}

	.number .stepper {
		/* margin-left: 38%; */
		/* margin-top: -35upx; */
		float: right;
		padding: 14upx 0;
		margin-right: 25%;
	}

	.radio1 {
		float: right;
		margin-right: 8upx;
		margin-top: 6px;
	}

	.radio2 {
		float: right;
		margin-right: 8upx;
		margin-top: 6px;
	}

	.primary {
		width: 94%;
		height: 2.5upx;
		letter-spacing: 0.4upx;
		font-size: 1upx;
		border-radius: 1.5upx;
		margin: 0 auto;
		display: block;
		margin-top: 20upx;
	}

	.subscribe {
		margin: 0 auto;
		border-radius: 50px;
	}

	image {
		width: 750upx;
	}
</style>
